<template>
  <div style="">
    <div class="top">
      <Row
        type="flex"
        justify="center"
        style="margin: 10px;"
      >
        <DatePicker
          type="daterange"
          placeholder="签到时间"
          format="yyyy/MM"
          v-model="bloc.dateSignLogUsage"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          size="default"
          @click="getData()"
          >查询
        </Button>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 100%"
        :gutter="50"
      >
        <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
      </Row>
      <div style="height: 50px;"></div>
    </div>

    <div class="top">
      <Row
        type="flex"
        justify="center"
        style="margin: 10px;"
      >
        <DatePicker
          type="daterange"
          placeholder="签到时间"
          format="yyyy/MM/dd"
          v-model="bloc.dateSignLogUsageDaily"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          size="default"
          @click="getDataDaily()"
          >查询
        </Button>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 100%"
        :gutter="50"
      >
        <div id="myChart2" :style="{width: '100%', height: '100%'}"></div>
      </Row>
      <div style="height: 50px;"></div>
    </div>
    <div class="top">
      <Row
        type="flex"
        justify="center"
        style="margin: 10px;"
      >
        <RadioGroup v-model="bloc.timeUnit">
            <Radio :label="0">月</Radio>
            <Radio :label="1">周</Radio>
        </RadioGroup>
        <DatePicker
          type="daterange"
          placeholder="统计时间"
          format="yyyy/MM/dd"
          v-model="bloc.dateSignLogComprehensive"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          size="default"
          @click="getDataComprehensive()"
          >查询
        </Button>
      </Row>
      <Row type="flex" justify="center">
        <div style="margin: 10px 20px 10px 0">
          {{ bloc.txt3 }}
        </div>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 100%"
        :gutter="50"
      >
        <div id="myChart3" :style="{width: '100%', height: '100%'}"></div>
      </Row>
      <div style="height: 50px;"></div>
    </div>

  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { ChartBarAxis,ChartLine } from "@/component/charts";
import { DataBloc } from "./DataBloc";
import { Route } from "vue-router";
import { calculateTrendLine } from "@/base/util/Dates";
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

@Component({
  components: { ChartBarAxis,ChartLine },
})
export default class extends Vue {
  @Prop({ type: Number }) readonly init!: number;
  bloc = new DataBloc();
  date = [
    new Date(new Date().getTime()-30*24*60*60*1000),
    new Date()
  ];

  dateChange(date) {
    if (date[0] === "" || date[1] === "") {
      return false;
    }
  }

  created() {
    console.log(this.bloc);
    Promise.race([

    ]).then((res) => {
      console.log(this.bloc);
    });
  }
  mounted() {
    this.getData();
    this.getDataDaily();
    this.getDataComprehensive();
  }
  async getData() {
    let myChart = echarts.init(document.getElementById('myChart'))
    myChart.showLoading();
    await this.bloc.getSignLogUsage()
    myChart.setOption(this.bloc.optionsSignLogUsage);
    myChart.hideLoading();
  }
  async getDataDaily() {
    let myChart = echarts.init(document.getElementById('myChart2'))
    myChart.showLoading();
    await this.bloc.getSignLogUsageDaily()
    myChart.setOption(this.bloc.optionsSignLogUsageDaily);
    myChart.hideLoading();
  }
  async getDataComprehensive() {
    let myChart = echarts.init(document.getElementById('myChart3'))
    myChart.showLoading();
    await this.bloc.getSignLogComprehensive()
    myChart.setOption(this.bloc.optionsSignLogComprehensive);
    myChart.hideLoading();
  }

  // beforeRouteUpdate(to: Route, from: Route, next: (vm: any) => void) {
  //   next(vm => {
  //     Promise.race([vm.bloc.getDevcieDistribute(1, 10, this.bloc.model), vm.bloc.getDeviceFaultNum(),
  //       vm.bloc.getDeviceUseModelLifetime(), vm.bloc.getDeviceUseModeUse(), vm.bloc.getDeviceStatusNum()])
  //       .then(res => {
  //         console.log(vm.bloc.modelNum)
  //       })
  //   });
  // }
}
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 500px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(242, 242, 242, 1);
}
</style>
